<template>
   <div class="hour-array" >
        <search :sinfo="sinfo" :num='2'></search>
        <div id="listWrap" class="cla-wrap">
            <p class="p-msg hide"><i class="loading"></i>正在加载...</p>
            <div class="sub-nav" ref="leftWrapper">
              <div class="pb-101" style="padding-bottom:5rem">
               <a v-for="(item,index) in dataonearray"  v-text="item.catalogName"  :data-code="item.catalogCode" href="javascript:;" :class="{'curr':index== menuCurrentIndex}" @click="menuClick(index,$event)" :key="item.id"></a>
              </div>
            </div>
            <div  class="right-Wrapper"  ref="rightWrapper">
              <div class="pro-area pb-100" >
                    <div v-for="(item,index) in dataonearray" :data-code="item.catalogCode" class="pro-cont right-list-hook" :key="item.id">
                      <router-link v-if="item.childCatalogs[0].childCatalogs" :to="{name:'shoplist', params:{catalogCode: item.childCatalogs[0].childCatalogs[0].catalogCode}}" style="display: block">
                          <span class="pro-title" v-if="item.imgUrl != ''">
                            <img :src="item.imgUrl" :alt="item.catalogName" >
                          </span>
                        </router-link>
                        <!-- {{item}} -->
                        <a :href="item.promotionUrl ? item.promotionUrl : '#/list'" style="display: block">
                         <img  v-if="!!item.promotionImg" :src="item.promotionImg"  :alt="item.catalogName">
                         </a>
                       
                        <dl class="pro-box">
                          <dd class="pro-detail">
                              
                              <div v-for="(val,i) in item.childCatalogs" class="pro-detail-box" :class="{'pro-detail-box-block': item.showTitle}" :key="item.id" v-if="item.childCatalogs[i]">
                                <dt v-if="item.showTitle" v-text="item.childCatalogs[i].catalogName"></dt>
                                    <router-link  v-for="(v, n) in item.childCatalogs[i].childCatalogs" :to="{name:'shoplist', params:{catalogCode: v.catalogCode}}" :key="item.id">
                                        <img v-lazyload="v.imgUrl"  class="p-opa" alt="">   
                                        <span class="catalogCode" :class="v.catalogCode"></span>
                                        <span class="parentCode" :class="v.parentCode"></span>
                                        <p class="p-title" v-text="v.catalogName"></p>
                                    </router-link>
                            </div>
                
                          </dd>

                        </dl>
                    </div>

                </div>
            </div>
    </div>
      
   </div>
</template>

<script>
    import search from "../search/search"
    import BScroll from 'better-scroll'
    import {  getBusy } from '@/service/getData'
    import Vue from 'vue'
    import LazyLoad from './lazyload.js'
    Vue.use(LazyLoad)
    export default {
      props:['dataonearray','sinfo'],
      data(){
        return {
          // sinfo:"",
          rightWrapper:{},
          leftWrapper:{},
          listHeight:[],
          foodsScrollY:0
        }
      },
      components:{
        search
      },
      mounted(){
          this.$nextTick(() => {
           setTimeout(() => {
                 $('#listWrap').height($('.foot-tab').offset().top - $('#listWrap').offset().top)
               }, 1000)
              
          });
      },
      computed:{
        menuCurrentIndex() {
          var listH = $('.sub-nav').height()
          var h1;
           
             h1 = $('.pb-101 a:first-child').height();
          
          var len = this.listHeight.length;
          var num = 0;
          var allnum = parseInt($('.sub-nav').height()/h1);
          if(allnum < len ) {
              num = len - allnum+1
          }
          for (let i = 0, l = len; i < l; i++) {
            let topHeight = this.listHeight[i]
            let bottomHeight = this.listHeight[i + 1]
            if(i == this.listHeight.length-2) {
              bottomHeight = bottomHeight+400
            }
            if( i >= parseInt(len/3) && i <= parseInt(len/3)+num ) {
              $('.pb-101').css({
                transform: 'translate(0, '+(-(h1)*(i - parseInt(len/3)))+'px)'
                // marginTop: 
              },1000) 
            }else if(i < parseInt(len/3)){
              $('.pb-101').css({
                transform: 'translate(0, 0)'
              }, 1000)
            }
            if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {

              return i

            }
          }
          // console.log(i);
          return 0 
        }
      },
    
      watch:{
        dataonearray(){
            this.$nextTick(() => {

               this._initScroll();
               this._calculateHeight();
               
               if(localStorage.top > 0) {
                 this.foodsScrollY = localStorage.top
                 this.rightWrapper.scrollTo(0, -this.foodsScrollY)

              }


            });  
        }
      },
      methods:{
          _initScroll() {
             this.leftWrapper = new BScroll(this.$refs.leftWrapper, {
              click: true,
              // probeType: 3
            });


            this.rightWrapper = new BScroll(this.$refs.rightWrapper, {
              click: true,
              probeType: 3
            });
           
            
            // 监控滚动事件
            this.rightWrapper.on('scroll', (pos) => {
              this.foodsScrollY = Math.abs(Math.round(pos.y));
              localStorage.top = Math.abs(Math.round(pos.y));
            })
          },

          _calculateHeight() {
            let foodList = this.$refs.rightWrapper.querySelectorAll('.right-list-hook')
            let height = 0
            this.listHeight.push(height)
            for (let i = 0, l = foodList.length; i < l; i++) {
              let item = foodList[i]
              height += item.clientHeight
              this.listHeight.push(height)
            }
          },

          menuClick(index, event) {
            this.rightWrapper.scrollTo(0, -this.listHeight[index], 300)

            if (!event._constructed) {
              return
            }
          }
          
      }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

.hour-array {
  height: 100%;
  overflow: hidden;
  background-color: #fbf9fe;
}
.right-Wrapper {
    float: left;
    width: 10.72rem;
    height: 100%;
    overflow: hidden;
    // -webkit-overflow-scrolling: touch;
}
   .cla-wrap {
    width: 100%;
    margin-top: .24rem;
    height: 21.3rem;
    overflow: hidden;
}
.p-msg {
    text-align: center;
    color: #999;
    padding: 0 0 .4rem 0px;
}
.cla-wrap .sub-nav {
    // transition: all 0.3s;
    float: left;
    width: 3.8rem;
    height: 100%;
    margin-left: .24rem;
    -webkit-overflow-scrolling: touch;
}
.cla-wrap .sub-nav a.curr {
    background: url() repeat 0 0 ;
    color: #fff;
} 
.cla-wrap .sub-nav a {
    display: block;
    width: 100%;
    height: 1.76rem;
    line-height: 1.76rem;
    text-align: center;
    font-size: .52rem;
    color: #666;
    margin-bottom: 1px;
    background: #fff;
}
.cla-wrap .pro-area .pro-cont .pro-box dt {
    background-color: #FAFAFA;
    margin: 0 .4rem 1px;
    height: .88rem;
    line-height: .88rem;
    text-align: center;
    font-size: .44rem;
    color: #999999;
}
.cla-wrap .pro-area {
    margin-left: .24rem;
    
}
.cla-wrap .pro-area .pro-cont {
    margin-bottom: .4rem;
    background-color: #fff;
}
.cla-wrap .pro-area .pro-cont .pro-title {
    display: block;
    position: relative;
    height: 1.96rem;
    line-height: 1.96rem;
    text-align: center;
}
.cla-wrap .pro-area .pro-cont .pro-title img {
    display: block;
    height: 1.96rem;
    line-height: 1.96rem;
    margin: 0 auto;
}
.cla-wrap .pro-area .pro-cont .pro-box .pro-detail a img.p-opa {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: .4rem;
    vertical-align: middle;
}
.cla-wrap .pro-area .pro-cont .pro-box .pro-detail {
    overflow: hidden;
 
    background-color: #fff;
}
.pro-cont .pro-box .pro-detail .pro-detail-box{
  display: inline;
}
.pro-cont .pro-box .pro-detail .pro-detail-box.pro-detail-box-block{
  display: block;
  overflow: hidden;
}
 
.cla-wrap .pro-area .pro-cont .pro-box .pro-detail a {
    display: inline-block;
    float: left;
    width: 3.3rem;
    height: 4.6rem;
    padding: .4rem 0;
    text-align: center;
    color: #999;
    box-sizing: border-box;
} 
 .pb-101 {
  transition: all 0.5s;
 } 
</style>
